<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            overflow-y: hidden;
            overflow-x: hidden;
        }

        .max {
            width: 100%;
            height: 800px;
            border: 1px solid red;
            position: absolute;
            background-image: url("body_bg.jpg");
            background-repeat: repeat-x;

            /* display: flex;*/
            /* overflow: hidden;*/
        }

        #bird {
            position: absolute;
            left: 300px;
            height: 50px;
            width: 150px;
            background-image: url("凤凰.gif");
            background-size: 100% 100%;
        }

        .wallTop {

            border: none;
            width: 80px;
            /*height: 200px;*/
            background-image: url("管道下.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            float: left;
            position: absolute;
            left: 100%;
            top: 0 /*position: relative;
            position: absolute;
            top: 500px;
            left: 1800px;*/
        }

        .wallDown {

            border: none;
            width: 80px;
            /*height: 200px;*/
            background-image: url("管道.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            float: left;
            position: absolute;
            left: 100%;
            bottom: 100px;
            /*position: relative;
            position: absolute;
            top: 500px;
            left: 1800px;*/
        }

        .aaa {
            /*background: red;*/
        / / border: none;
            background: rgba(0, 0, 0, 0);
            position: absolute;
            /* left: 0;
             display: none;*/
        }

        #Fraction {
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div class="max">
    <div id="Fraction"><h5 id="f_num"></h5></div>
    <div id="bird"></div>
</div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
    var i = 0
    var wallNun = 0
    var birdTop;
    var birdLeft;
    var f_num = 0;


    $(function () {

        console.log($(".max").width())
        setInterval(function () {
            bgAction()
            wallAction()
            $("#f_num").html(f_num++ + "米")
        }, 10)


        setInterval(function () {
            craeteWall()
        }, 4000)

        setInterval(function () {
            birdAction()
        }, 100)

    })


    var up = 1, down = 1, left = 1, right = 1;
    var width = $(".max").width() - 10
    var height = $(".max").height() - 10
    var up = 0;
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];


        if (e && e.key == "ArrowUp") {
            console.log("上")
            up -= 30
            if (up < 2) {
                up = 1
            }

            action(up, down, left, right)
        }
        if (e && e.key == "ArrowDown") {
            console.log("下")
            up += 30
            if (up > height - 180) {
                up = height - 180
                alert("闯关失败")

                history.go(0)
            }
            action(up, down, left, right)
        }
        /*  if (e && e.key=="ArrowLeft") {
              console.log("左")
              left-=10
              if(left<2){
                  left=1
              }
              action(up,down,left,right)
          }
          if (e && e.key=="ArrowRight") {
              console.log("右")
              left+=10
              if(left>width-150){
                  left=width-150
              }
              action(up,down,left,right)
          }*/
    }

    function action(up, down, left, right) {
        birdTop = $('#bird').offset().top
        birdLeft = $('#bird').offset().left
        console.log(birdTop, birdLeft)
        $("#bird").css({
            "position": "relative",
            "top": up += 10,
            "bottom": down += 10,
            "left": "300px",
            "right": right++
        })
    }


    var walls = [1920, 1920, 1920, 1920, 1920, 1920]

    //背景动画
    function bgAction() {
        i--;
        $(".max").css({"background-position": i + "px 0"})

    }

    //创建墙体
    var num = 0
    var addAndRem = 0
    var str = ""
    var suijix = 200;
    var suijiy = 1;

    function craeteWall() {
        if (wallNun == 6) {

            wallNun = 0
            addAndRem++;
        }
        if (addAndRem != 0) {
            // setTimeout(1000)
            //$('.wall' + num).remove();
            $('.wall' + num).attr("class", "wall aaa")
            walls[num] = 1920
            num++
            if (num == 6) {
                num = 0
            }

        }
        var name = "wall" + wallNun;
        var name2 = "wallxia" + wallNun;

        str += "<div class='wallTop " + name + "'></div>"
        str += "<div class='wallDown " + name2 + "'></div>"

        $(".max").append(str)
        var rand = parseInt(Math.random() * (suijix - suijiy + 1) + suijiy);
        $("." + name).css({"height": (300 + rand) + "px"})
        $("." + name2).css({"height": (300 - rand) + "px"})
        wallNun++;
    }

    //墙体动画
    var k = 0

    function wallAction() {

        if (wallNun == 6) {
            k = 6
        }

        for (var j = 0; j < (k != 0 ? k : wallNun); j++) {
            walls[j] = walls[j] - 0.864
            $('.wall' + j).css({"position": "absolute", "left": walls[j] + "px"})
            $('.wallxia' + j).css({"position": "absolute", "left": walls[j] + "px"})
            console.log("这是上管道高度" + $('.wall0').height())
            if (walls[j] <= 450 && walls[j] >= 300) {
                if ($('.wall' + j).height() < birdTop && (($('.wall' + j).height() + 100) > birdTop)) {
                    //&& (800-($('.wallxia' + j).height()))>birdTop

                } else {
                    alert("闯关失败")

                    history.go(0)
                }
            }


        }

    }

    function birdAction() {
        //console.log(down)
        if (up > height - 180) {
            up = height - 180
            alert("闯关失败")

            history.go(0)
        }
        birdTop = $('#bird').offset().top
        $("#bird").css({"position": "absolute", "top": up += 10})
    }


</script>
</body>
</html>
5000*20
